import PropTypes from 'prop-types'
import React, { Component } from "react";
import "./index.css";
export default class Item extends Component {

  // 类型限制
  static propTypes = {
    updateTodo: PropTypes.func.isRequired,
    headleDelete: PropTypes.func.isRequired
  }

  state = { mouse: false }; //存储
  headleMouse = (flag) => {
    //事件  如果有传参数必须使用return
    return () => {
      // 设置存储  修改存储  相当于小程序中的this.setDate 重新赋值
      this.setState({ mouse: flag });
    };
  };
  // 勾选 取消勾选  
  headleCheck = (id) => {
    return (event) => {
      this.props.updateTodo(id, event.target.checked)  //父组件传递过来的方法
    }
  }

  //普通写法 删除一个todo的回调
  headleDelete = (id) => {
    if (window.confirm('确定删除吗？')) {
      this.props.headleDelete(id)
    }

  }

  // 渲染
  render() {
    const { id, name, done } = this.props;
    const { mouse } = this.state;
    return (
      <li
        onMouseEnter={this.headleMouse(true)}
        onMouseLeave={this.headleMouse(false)}
        style={{ background: mouse ? "#ddd" : "white" }}
      >
        <label>
          <input type="checkbox" checked={done} onChange={this.headleCheck(id)} />
          <span>{name}</span>
        </label>
        <button
          className="btn btn-danger"
          style={{ display: mouse ? "block" : "none" }}
          onClick={() => this.headleDelete(id)}
        >
          删除
        </button>
      </li>
    );
  }
}
